<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue生命周期</title>
    <script src="../js/vue.js"></script>
</head>
<body>

<div id="app">
    <p id="info">{{info}}</p>
    <p><input type="text" v-model="info"></p>
</div>
<!--
        vue生命周期
            1.初始化阶段
                beforeCreate()  该函数执行时  vue完成了  事件和生命周期函数的初始化
                created()      vue  完成了语法的校验   data  el  初始化
                beforeMount()   vue完成了模板的编译   尚未完成替换
                mounted()       vue完成了模板编译后的替换操作
            2.运行阶段
                beforeUpdate()   在数据更新之前执行的函数  页面中的数据还没有被替换
                updated()       在数据更新之后执行的函数  页面中的数据已经被替换
            3.销毁阶段
              beforeDestroy()
              destroyed()       vue实例已经完成销毁   事件监听 子组件 卸载
-->
<script>
    const vm = new Vue({
        el:'#app',
        data:{
            info:'vue 生命周期演示',
            users:[]
        },
        methods:{},
        beforeCreate(){
            console.log("===================beforeCreate()===================")
            console.log("info = "+this.info)
        },
        created(){
            //  发送异步请求的最早时机 $.ajax({})   axios
            console.log("=================== created()===================")
            console.log("info = "+this.info)
        },
        beforeMount(){
            console.log("=================== beforeMount()===================")
            let p = document.getElementById("info");
            let info = p.innerText;
            console.log("beforeMount info = "+info)
        },
        mounted(){
            console.log("===================mounted()===================")
            let p = document.getElementById("info");
            let info = p.innerText;
            console.log("beforeMount info = "+info)
        },
        beforeUpdate(){
            console.log("===================beforeUpdate()===================")
            let p = document.getElementById("info");
            let info = p.innerText;
            console.log("beforeMount info = "+info)
        },
        updated(){
            console.log("===================updated()===================")
            let p = document.getElementById("info");
            let info = p.innerText;
            console.log("beforeMount info = "+info)
        },
        beforeDestroy(){
            console.log("===================beforeDestroy()===================")
        },
        destroyed(){
            console.log("===================destroyed()===================")
        }

    })
</script>
</body>
</html>
